<template>
  <el-container>
    <el-header style="height: 150">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card
            :body-style="{
              'background-color': '#A0CFFF',
              height: '120px',
              'text-align': 'left',
            }"
            shadow="hover"
          >
            <div>
              <span><h3>总访问量</h3></span>
              <br />
              <span :style="{ 'text-align': 'center' }"
                ><h2>{{ accessallnum }} 万</h2></span
              >
              <br />
              <span :style="{ 'text-align': 'right' }"
                ><h3>日访问量：{{ accessnum }}</h3></span
              >
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card
            :body-style="{
              'background-color': '#75c94c',
              height: '120px',
              'text-align': 'left',
            }"
            shadow="hover"
          >
            <div>
              <span><h3>总注册</h3></span>
              <br />
              <span :style="{ 'text-align': 'center' }"><h2>{{accountallnum}} </h2></span>
              <br />
              <span :style="{ 'text-align': 'right' }"><h3>日注册：3</h3></span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card
            :body-style="{
              'background-color': '#e9ae56',
              height: '120px',
              'text-align': 'left',
            }"
            shadow="hover"
          >
            <div>
              <span><h3>数据总量</h3></span>
              <br />
              <span :style="{ 'text-align': 'center' }"><h2>{{alldatanum}}</h2></span>
              <br />
              <span :style="{ 'text-align': 'right' }"><h3>日增数据： 350</h3></span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <el-card class="box-card">
        <el-row>
          <el-col :span="18">
            <div class="grid-content bg-purple-dark">
              <div class="echarts-div" id="index_chart">main charts</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-dark" :style="{ 'margin-left': '10px' }">
              <div>
                编号:<el-input
                  :style="{ 'margin-top': '60px' }"
                  class="inputself"
                  readonly="readonly"
                  v-model="getInfo.userName"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div>
                登录时间:<el-input
                  class="inputself"
                  readonly="readonly"
                  v-model="getInfo.loginTime"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div>
                登录地点:<el-input
                  class="inputself"
                  readonly="readonly"
                  v-model="getInfo.ipAddr"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div>
                登录IP:<el-input
                  class="inputself"
                  readonly="readonly"
                  v-model="getInfo.loginIp"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
    <el-footer>
      <p>医疗健康分析系统</p>
      <div :style="{ float: 'right', 'margin-right': '100px' }">
        <span>by_信管1801 李小鹏</span>
      </div>
      <div></div>
    </el-footer>
  </el-container>
</template>

<script>
import { post, get, setItem, getItem, remItem, GetDataTest } from "../../utils/com";
import { mapGetters } from "vuex";
import { defineComponent } from "vue";
export default defineComponent({
  name: "index",
  computed: {
    ...mapGetters(["getInfo"]),
  },
  data() {
    let accessnum = 0;
    let accessallnum = 0;
    let accountallnum = 0;
    let alldatanum = 0;
    return {
      accessnum,
      accessallnum,
      accountallnum,
      alldatanum
    };
  },
  methods: {
    initCharts() {
      this.$echarts.dispose(document.getElementById("index_chart"));
      this.index_mycharts = this.$echarts.init(document.getElementById("index_chart"));
      this.index_setOptions();
    },
    index_setOptions() {
      this.index_mycharts.setOption({
        title: {
          text: "数据处理量分布",
          left: "center",
        },
        legend: {
          top: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:15",
            "02:30",
            "03:45",
            "05:00",
            "06:15",
            "07:30",
            "08:45",
            "10:00",
            "11:15",
            "12:30",
            "13:45",
            "15:00",
            "16:15",
            "17:30",
            "18:45",
            "20:00",
            "21:15",
            "22:30",
            "23:45",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
          axisPointer: {
            snap: true,
          },
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: "green",
            },
            {
              gt: 6,
              lte: 8,
              color: "red",
            },
            {
              gt: 8,
              lte: 14,
              color: "green",
            },
            {
              gt: 14,
              lte: 17,
              color: "red",
            },
            {
              gt: 17,
              color: "green",
            },
          ],
        },
        series: [
          {
            name: "计算量",
            type: "line",
            smooth: true,
            data: [
              300,
              280,
              250,
              260,
              270,
              300,
              550,
              500,
              400,
              390,
              380,
              390,
              400,
              500,
              600,
              750,
              800,
              700,
              600,
              400,
            ],
            markArea: {
              itemStyle: {
                color: "rgba(255, 173, 177, 0.4)",
              },
              data: [
                [
                  {
                    name: "早高峰",
                    xAxis: "07:30",
                  },
                  {
                    xAxis: "10:00",
                  },
                ],
                [
                  {
                    name: "晚高峰",
                    xAxis: "17:30",
                  },
                  {
                    xAxis: "21:15",
                  },
                ],
              ],
            },
          },
        ],
      });
    },
    getAccessNum() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/access/day").then(function (res) {
        _this.accessnum = res["accessnum"];
        return res;
      });
    },
    getAccessALLNum() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/access/all").then(function (res) {
        _this.accessallnum = res["allaccessnum"];
        return res;
      });
    },
    getAccountALLNum() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/account/all").then(function (res) {
        _this.accountallnum = res["accountallnum"];
        return res;
      });
    },
        getDateALLNum() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/data/all").then(function (res) {
        _this.alldatanum = res["alldatanum"];
        return res;
      });
    },
  },
  mounted() {
    this.initCharts();
    this.getAccessNum();
    this.getAccessALLNum();
    this.getAccountALLNum();
    this.getDateALLNum();
  },
});
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 100px; */
}
.el-header {
  /* margin: 30px; */
  padding: 30px;
}
/* .el-container {
  width: 100%;
  height: 100%;
} */
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

.box-card {
  width: 100%;
  /* height: 100%; */
  /* height: 400px; */
}
.echarts-div {
  height: 99%;
  width: 99%;
}
.bg-purple-dark {
  /* background: #99a9bf; */
  background: #cdddf3;
}
.grid-content {
  margin: 5px;
  height: 500px;
  width: 100%;
  border-radius: 4px;
  min-height: 36px;
  /* border: 3px solid rgb(90, 89, 89); */
}
.demo-input-label {
  display: inline-block;
  /* width: 130px; */
}
.inputself {
  /* background-color: ; */
  /* margin: 20 auto; */
  margin-top: 40px;
  margin-left: 20px;
  width: 60%;
}
</style>
